<template>
	<ul class="list-item-20180408">
		<li v-for="item in listData">
			<img :src="item.url" />
			<div class="list-sort">
				<h1 class="ecs">{{item.title}}</h1>
				<div class="worker"><sub class="mr-1">员工价</sub><sup>{{item.workerPrice}}</sup></div>
				<p class="market">市场价: {{item.marketPrice}}</p>
				<button class="buy" @click="goActivityGoods(item.id, '')">立即购买</button>
			</div>
		</li>
	</ul>
</template>

<script>
	import Utils from '@/util/util';
	import Vue from 'vue';
	import { ToastPlugin } from 'vux';
	Vue.use(ToastPlugin)

	export default {
		components: {
			ToastPlugin
		},
		props: ['listData'],
		methods: {
			goActivityGoods: function(goodsId, activityId) {
				Utils.goActiveGoods(goodsId, activityId)
			}
		},
		data() {
			return {
			}
		}
	}
</script>
<style lang="less">
	@import '~@/assets/less/main.less';

	.list-item-20180408 {
		width: 7.06rem;
		margin: 0 auto;
		overflow: hidden;
		li {
			width: 3.4rem;
			background-color: #fff;
			margin-bottom: .2rem;
			border-radius: .08rem;
			padding-bottom: .3rem;
			&:nth-child(odd) {
				clear: both;
				float:left;
			}
			&:nth-child(even) {
				float:right;
			}
			img {
				width: 100%;
				display: block;
				border-top-left-radius: .08rem;
    			border-top-right-radius: .08rem;
			}
			.list-sort {
				text-align: center;
				h1 {
					font-size: .3rem;
					margin-bottom: 0;
					padding: 0 .2rem;
				}
				.worker {
					sub, sup {
						vertical-align: bottom;
					}
					sub {
						font-size: .24rem;
						line-height: .24rem;
						color:#f90;
					}
					sup {
						font-size: .3rem;
						line-height: .3rem;
						display: inline-block;
					}
				}
				.market {
					margin: .1rem 0 0;
					font-size: .18rem;
					color: #666;
				}
				.buy {
					width: 2.8rem;
					height: .55rem;
					border: none;
					border-radius: .3rem;
					color: #fff;
					font-size: .24rem;
					margin-top: .1rem;
					.gradient-setting(#fa3489 , #fc4a72);
				}
			}
		}
		&.second-list {
			li .list-sort .buy {
				.gradient-setting(#6b7dfb , #4691fb);
			}
		}
	}
</style>